import styled from 'styled-components'
export const Wrap = styled.div<{
	height?: number
}>`
	display: flex;
	flex-direction: row;
	align-items: center;
	height: ${(props) => {
		return props.height ? `${props.height}px` : '30px'
	}};
	margin-bottom: 10px;
	.content-select {
		margin-right: 25px;
	}
	.tips {
		color: #b6b6b6;
		&.live-tip,
		&.video-tip {
			margin-left: 10px;
		}
	}
	.wrap-content {
		flex: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
`
export const WrapL = styled.div`
	display: flex;
	margin-bottom: 10px;
	.wrap-label {
		flex: 0 0 75px;
	}
	.wrap-content {
		flex: 1;
		.wrap-content-top {
			display: flex;
			position: relative;
			margin-bottom: 10px;
			.live-url {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				width: 165px;
			}
			.copy-icon {
				position: absolute;
				right: 0;
				top: -8px;
			}
		}
		.qrCode {
			.qrImg {
				width: 80px;
				height: 80px;
			}
		}
	}
`
export const BtnWrap = styled.div`
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 28px;
	.showModel {
		width: 100%;
		padding-left: 10px;
	}
	.time {
		margin: 0 10px 0 10px;
	}
`
export const Label = styled.div`
	width: 75px;
`
